import React, {useEffect, useLayoutEffect, useState} from "react";
import {Layout} from 'antd';
import styled from "@emotion/styled";
import {OssHeader} from "./layout/Header";
import {OssMenus} from "./layout/Menus";
import {useLocation, useNavigate, useRoutes} from 'react-router-dom';
import {SourcePage} from "./source";
import {TagsPage} from "./tags";
import {ImagesPage} from "./images";
import {VideosPage} from "./videos";
import {DocumentPage} from "./document";
import {
    CloudServerOutlined,
    DeleteOutlined,
    FileImageOutlined,
    FileTextOutlined,
    SettingOutlined,
    TagOutlined, UserOutlined,
    VideoCameraOutlined
} from "@ant-design/icons";
import {SettingPage} from "./setting";
import {RouteObject} from "react-router";
import {LoginPage} from "./login";
import {GarbagePage} from "./garbage";
import {CustomizePage} from "./customize";
import {HttpGet} from "../utils/http";
import {InstallPage} from "./install";
import {useSelector} from "../redux/hooks";
import {useDispatch} from "react-redux";
import {changeConfigStatusActionCreator} from "../redux/config/action";


export interface RouterItem extends RouteObject {
    key: string;             // key
    title: string            // 标题
    icon: React.ReactNode;   // 图标
}

const homeRouters: RouterItem[] = [
    {key: 'source', title: '存储源', path: '/source', icon: <CloudServerOutlined />, element: <SourcePage />},
    {key: 'tags', title: '标签', path: '/tags', icon: <TagOutlined />, element: <TagsPage />},
    {key: 'images', title: '图片', path: '/images', icon: <FileImageOutlined />, element: <ImagesPage />},
    {key: 'videos', title: '视频', path: '/videos', icon: <VideoCameraOutlined />, element: <VideosPage />},
    {key: 'document', title: '文档', path: '/document', icon: <FileTextOutlined />, element: <DocumentPage />},
    {key: 'customize', title: '自定义', path: '/customize', icon: <UserOutlined />, element: <CustomizePage />},
    {key: 'garbage', title: '回收站', path: '/garbage', icon: <DeleteOutlined />, element: <GarbagePage />},
    {key: 'setting', title: '设置', path: '/setting', icon: <SettingOutlined />, element: <SettingPage />},
]


const Application = () => {

    let navigate = useNavigate();

    let location = useLocation();

    const status = useSelector((state) => state.user.status)

    const [currPath, setCurrPath] = useState<string>('source')

    let routes = useRoutes([{path: '/', element: <SourcePage />}, ...homeRouters])



    useEffect(() => {
        let path = location.pathname
        console.log("pathname", location.pathname, path, path.slice(1))
        setCurrPath(path.slice(1))
    }, [location.pathname])

    return status ? <Container>
        <OssHeader />
        <Layout.Content className="content-area" style={{ padding: '30px 30px' }}>
            <Layout className="site-layout-background inner-area" style={{ padding: '24px 0', height: '100%' }}>
                <OssMenus defaultPath={currPath} routers={homeRouters} pageJump={(path) => navigate(path)}/>
                <Layout.Content className="content-main" style={{ padding: '0 24px', minHeight: 280 }}>
                    {routes}
                </Layout.Content>
            </Layout>
        </Layout.Content>
    </Container> : <LoginPage />
}


export const ApplicationRun = () => {

    const dispatch = useDispatch();

    const installStatus = useSelector((state) => state.config.status)

    const checkConfig = () => {
        HttpGet<boolean>('/install/check').then(res => {
            if (res.code === '100200') {
                dispatch(changeConfigStatusActionCreator({status: res.data}))
            }
        })
    }

    // useEffect(() => checkConfig(), []);

    useLayoutEffect(() => {
        checkConfig();
    }, [])

    return installStatus ? <Application /> : <InstallPage success={(flag) => dispatch(changeConfigStatusActionCreator({status: flag}))} />

}

const Container = styled(Layout)`
  height: 100vh;
  .inner-area {
    box-shadow: 0 10px 10px rgb(0 0 0 / 5%), 0 5px 10px rgb(0 0 0 / 5%);
    border-radius: 10px;
    overflow: hidden;
  }
  .site-layout-background {
    background: #fff;
  }
`
